<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>本地localStorage网页笔记</title>
    <!-- Iconscout Link For Icons -->
    <link
      rel="stylesheet"
      href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
    <style>
      :root {
        --primaryColor: #0e153a;
        --secondarycolor: #e2f3f5;
        --primaryText: #3d5af1; 
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
          'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      }
      body {
        background: var(--primaryColor);
      }
      .wrapper {
        margin: 50px;
        display: grid;
        gap: 15px;
        grid-template-columns: repeat(auto-fill, 265px);
      }
      .wrapper li {
        height: 250px;
        list-style: none;
        background: var(--secondarycolor);
        border-radius: 5px;
        padding: 15px 20px 20px;
      }
      .add-box,
      .icon,
      .bottom-content,
      .popup,
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .add-box {
        flex-direction: column;
        justify-content: center;
        cursor: pointer;
      }
      .add-box .icon {
        height: 88px;
        width: 88px;
        font-size: 60px;
        justify-content: center;
        color: var(--primaryColor);
      }
      .add-box p {
        color: var(--primaryText);
        font-weight: 500;
        margin-top: 20px;
      }
      .wrapper .note {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      .note p {
        font-size: 22px;
        font-weight: 500;
        color: var(--primaryColor);
      }
      .note span {
        display: block;
        margin-top: 5px;
        color: var(--primaryText);
        font-size: 16px;
        max-height: 134px;
        overflow: auto;
      }
      .bottom-content span {
        color: var(--primaryText);
        font-size: 14px;
      }
      .bottom-content .settings i {
        color: var(--primaryText);
        font-size: 15px;
        cursor: pointer !important;
        padding: 0 10px;
      }
      .popup-box {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 2;
        width: 100%;
        background: rgba(0, 0, 0, 0.4);
      }
      .popup-box .popup {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 3;
        max-width: 400px;
        width: 100%;
        justify-content: center;
        transform: translate(-50%, -50%);
      }
      .popup-box,
      .popup-box .popup {
        opacity: 0;
        pointer-events: none;
        transition: all 0.25s ease;
        z-index: -1;
      }
      .popup-box.show,
      .popup-box .popup {
        opacity: 1;
        pointer-events: auto;
        z-index: 3;
      }
      .popup .content {
        width: calc(100% - 15px);
        border-radius: 5px;
        background: #fff;
      }
      .popup .content header {
        padding: 15px 25px;
        border-bottom: 1px solid #ccc;
      }
      .content header p {
        font-size: 20px;
        font-weight: 500;
      }
      .content header i {
        color: #575757;
        cursor: pointer;
        font-size: 20px;
      }
      .content form {
        margin: 15px 25px 35px;
      }
      .content form .row {
        margin-bottom: 20px;
      }
      form .row label {
        display: block;
        font-size: 18px;
        margin-bottom: 6px;
      }

      .content form :where(input, textarea) {
        width: 100%;
        height: 50px;
        outline: none;
        font-size: 17px;
        padding: 0 15px;
        border-radius: 4px;
        border: 1px solid #999;
      }

      .content form textarea {
        height: 150px;
        padding: 8px 15px;
        resize: none;
      }
      .content form button {
        width: 100%;
        height: 50px;
        border: none;
        outline: none;
        border-radius: 5px;
        color: #fff;
        font-size: 17px;
        background: var(--primaryColor);
      }
    </style>
  </head>
  <body>
    <!-- 弹框-->
    <div class="popup-box">
      <div class="popup">
        <div class="content">
          <header>
            <p></p>
            <i class="uil uil-times"></i>
          </header>
          <form action="#">
            <div class="row title">
              <label>标题</label>
              <input type="text" spellcheck="false" />
            </div>
            <div class="row description">
              <label>内容</label>
              <textarea spellcheck="false"></textarea>
            </div>
            <button></button>
          </form>
        </div>
      </div>
    </div>
    <!--初始框-->
    <div class="wrapper">
      <li class="add-box">
        <div class="icon"><i class="uil uil-plus"></i></div>
        <p>新增</p>
      </li>
    </div>
  </body>
  <!-- <script src="./mouseEffects/emojiCursor.js"></script> -->
  <script>
    const addBox = document.querySelector('.add-box'),
      popupBox = document.querySelector('.popup-box'),
      popupTitle = popupBox.querySelector('header p'),
      closeIcon = document.querySelector('header i'),
      titleEl = document.querySelector('input'),
      descEl = document.querySelector('textarea'),
      addBtn = document.querySelector('button ');

    const notes = JSON.parse(localStorage.getItem('notes') || '[]');
    let isUpdate = false,
      updateId;

    function showNotes() {
      document.querySelectorAll('.note').forEach((note) => note.remove());
      notes.forEach((note, index) => {
        let liEl = `<li class="note">
                           <div class="details">
                               <p>${note.title}</p>
                               <span>${note.description}</span>
                           </div>
                           <div class="bottom-content">
                               <span>${note.date}</span>
                               <div class="settings">
                                   <i onClick="updateNote(${index}, '${note.title}', '${note.description}')"  class="uil uil-edit"></i>
                                   <i onClick="deleteNote(${index})" class="uil uil-trash"></i>
                               </div>
                           </div>
                       </li>`;
        addBox.insertAdjacentHTML('afterend', liEl);
      });
    }

    showNotes();

    function deleteNote(noteId) {
      let confirmDelete = confirm('确定要删除吗?');
      if (!confirmDelete) return;
      notes.splice(noteId, 1);
      localStorage.setItem('notes', JSON.stringify(notes));
      showNotes();
    }

    function updateNote(noteId, title, desc) {
      isUpdate = true;
      updateId = noteId;
      addBox.click();
      titleEl.value = title;
      descEl.value = desc;
      addBtn.innerText = '编辑';
      popupTitle.innerText = '编辑笔记';
    }

    addBox.addEventListener('click', () => {
      titleEl.focus();
      addBtn.innerText = '新增';
      popupTitle.innerText = '新增一个笔记';
      popupBox.classList.add('show');
    });

    closeIcon.addEventListener('click', () => {
      isUpdate = false;
      titleEl.value = '';
      descEl.value = '';
      popupBox.classList.remove('show');
    });

    addBtn.addEventListener('click', (e) => {
      e.preventDefault();
      let noteTitle = titleEl.value,
        noteDesc = descEl.value;
      if (noteTitle || noteDesc) {
        let noteInfo = {
          title: noteTitle,
          description: noteDesc,
          date: new Date().toLocaleString().slice(0,10),
        };

        if (!isUpdate) {
          notes.push(noteInfo);
        } else {
          isUpdate = false;
          notes[updateId] = noteInfo;
        }

        localStorage.setItem('notes', JSON.stringify(notes));
        closeIcon.click();
        showNotes();
      }
    });
  </script>
</html>
